<template>
  <div>
    <div class="box">
      <div class="Nbox">
        <div class="top">
          <div class="searchInput">
            <el-input
              placeholder="请输入店员名称"
              v-model.trim="input1"
              @change="searchFn(input1)"
            >
              <i slot="suffix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </div>

          <div class="addClerk">
            <el-button
              type="text"
              class="el-icon-plus"
              @click="showFn('添加店员')"
              >添加店员</el-button
            >
            <el-dialog
              :title="title"
              align="center"
              :visible.sync="dialogFormVisible"
            >
              <el-form>
                <el-form-item label="店员名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号" :label-width="formLabelWidth">
                  <el-input
                    v-model.number="form.phone"
                    autocomplete="off"
                    maxlength="11"
                  ></el-input>
                </el-form-item>

                <el-form-item label="入职日期" :label-width="formLabelWidth">
                  <div class="block">
                    <el-date-picker
                      v-model="form.data"
                      type="date"
                      placeholder="选择日期"
                    >
                    </el-date-picker>
                  </div>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth">
                  <el-input
                    placeholder="请输入密码"
                    v-model="form.password"
                    autocomplete="off"
                    show-password
                  ></el-input>
                </el-form-item>
              </el-form>

              <div
                slot="footer"
                class="dialog-footer"
                v-if="title == '添加店员'"
              >
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :plain="true" type="primary" @click="open(form)"
                  >确 定</el-button
                >
              </div>

              <div slot="footer" class="dialog-footer" v-else>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button :plain="true" type="primary" @click="edit(id, form)"
                  >确 定</el-button
                >
              </div>
            </el-dialog>
          </div>

          <div class="searchButton">
            <el-button class="el-icon-search" round @change="searchFn(input1)"
              >搜索</el-button
            >
          </div>
        </div>

        <div class="bottom">
          <el-table :data="list" style="width: 100%" height="400">
            <el-table-column label="店员名称" width="200" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.username }}</span>
              </template>
            </el-table-column>

            <el-table-column label="联系方式" width="200" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.phone }}</span>
              </template>
            </el-table-column>

            <el-table-column label="入职时间" width="260" align="center">
              <template slot-scope="scope">
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="380" align="center">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  round
                  plain
                  @click="showFn2('编辑店员', scope)"
                  >编辑</el-button
                >

                <el-button
                  size="mini"
                  round
                  plain
                  @click="showFn1('设置菜单权限',scope)"
                  >菜单权限</el-button
                >

                <el-button
                  size="mini"
                  round
                  type="danger"
                  @click="handleDelete(scope.row.id)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!-- 菜单权限 -->
    <el-dialog :title="title" align="center" :visible.sync="dialogFormVisible1">
      <div>
        <!-- asyncroutes -->
        <el-form>
          <el-form-item label="菜单权限">
            <el-checkbox v-model="checked" @change="change">全选/全不选</el-checkbox>
          </el-form-item>

          <div class="xBox">
            <el-tree
            :data="data"
            show-checkbox
            node-key="path"
            ref="menu"
            >
            </el-tree>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer menufooter">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button :plain="true" type="primary" @click="open1"
            >确 定</el-button
          >
        </div>
      </div>
    </el-dialog>

    <div class="block1">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total.length"
      >
      </el-pagination>
    </div>

    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible2"
      width="30%"
      center
    >
      <span>确定要删除这条商品数据么</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="delete3(id)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { asyncRoutes } from '@/router';
import Vue from "vue";
import { Message } from "element-ui";
// Vue.use(Message)
Vue.prototype.$message = Message;
import { User } from "../../api";
export default {
  data() {
    return {
      total: "",
      limit: 10,
      currentPage: 1,
      id: "",
      list: [],
      path:[],
      tree: "",
      checked: false,
      title: "",
      input1: "", //搜索框
      centerDialogVisible2: false,
      dialogFormVisible: false,
      dialogFormVisible1: false,
      form: {
        name: "",
        phone: "",
        data: "", //日期框
        password: "",
        // path:"",
      },
      formLabelWidth: "120px",
      //日期选择器
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      data: [{
          id: 1,
          label: '首页',
          path:"/",
          children: [{
            id: 11,
            label: '首页',
            path:"/Home"
          }]
        }, {
          id: 2,
          label: '商品服务',
          path:"/product",
          children: [{
            id: 21,
            label: '商品管理',
            path:"/product/pro",
          }]
        },
         {
          id: 3,
          label: '订单管理',
          path:"/order",
          children: [{
            id: 31,
            path:"/order/line",
            label: '线上订单'
          }],
          },
          {
          id: 4,
          label: '寄养管理',
          path:"/foster",
          children: [{
            id: 41,
            path:"/foster/foster",
            label: '寄养管理'
          }],
          },
          {
          id: 5,
          label: '会员中心',
          path:"/vip",
          children: [{
            id: 51,
            path:"/vip/vip",
            label: '会员管理'
          },
          {
            id: 52,
            path:"/vip/rules",
            label: '会员规则'
          }
        ],
         
          },
          {
          id: 6,
          label: '财务中心',
          path:"/center",
          children: [{
            id: 61,
            path:"/center/center",
            label: '财务中心'
          }],
          },
          {
          id: 7,
          label: '店员管理',
          path:"/clert",
          children: [{
            id: 71,
            path:"/clert/clert",
            label: '店员管理'
          }],
          },
      ],
    };
  },
  methods: {
    handleSizeChange(val) {
      //分页
      this.limit = val;
      this.currentPage = 1;
      this.page();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) { //分页存
      this.currentPage = val;
      this.page();
      localStorage.setItem("lastPage",this.currentPage)
      // console.log(this.currentPage,"currentpage set");
      // console.log(`当前页: ${val}`);
    },
    async page() {
      console.log(this.currentPage, this.limit, "分页信息");
      let res = await User["page"](this.currentPage, this.limit);
      console.log(res, "分页信息");
      this.list = res.data;
    },
    edit(id, obj) {
      console.log(obj, "传入的obj");
      this.updateList(id, obj);
      this.$message({
        message: this.title === "编辑店员" ? "成功修改商品信息" : "",
        type: "success",
      });
      this.getList();
      this.page();
      this.dialogFormVisible = false;
    },
    showFn(til) {
      this.title = til;
      this.dialogFormVisible = true;
    },
    showFn1(til,scope) {
      this.id = scope.row.id;
      console.log(scope.row.id,"点击菜单获取id");
      this.title = til;
      this.dialogFormVisible1 = true;
    },
    async updateList(id, obj) {
      let res = await User["update"](id, obj);
      console.log(obj, "更新的obj");
      console.log(res, "更新完成");
    },
    showFn2(til, scope) {
      this.id = scope.row.id;
      console.log(this.id);
      this.title = til;
      this.dialogFormVisible = true;
      this.form.name = scope.row.username;
      this.form.phone = scope.row.phone;
      this.form.data = scope.row.time;
      this.form.password = scope.row.password;
      console.log(scope, "scope");
      this.getList();
    },
    async addList(obj) { //添加店员执行的函数
      console.log(obj);
      // let res = await User["add"](obj);
      let res = await User["register"](obj)
      console.log(res, "添加店员");
    },
    // handleEdit(index, row) {
    //   console.log(index, row);

    // },
     open1() {  //权限的确认按钮
      this.getMenuAllCheckedKeys()
      this.dialogFormVisible1 = false
    },
     // 所有菜单节点数据
     getMenuAllCheckedKeys() {
      // 目前被选中的菜单节点
      let checkedKeys = this.$refs.menu.getCheckedKeys();
      // 半选中的菜单节点
      let halfCheckedKeys = this.$refs.menu.getHalfCheckedKeys();
      // 根据需求给接口传选中的结点或者是半选的结点
      // console.log(checkedKeys,halfCheckedKeys,"节点选择");
      this.path = [...checkedKeys,...halfCheckedKeys] 
      console.log(this.path,"路由信息");
      this.getPath()
      this.$refs.menu.setCheckedKeys([]);
    },
    async delete(id) {
      let res = await User["del"](id);
      console.log(res, "删除成功");
    },
    handleDelete(id) {
      //删除按钮
      this.id = id;
      console.log(this.id, "想要删除的id");
      this.centerDialogVisible2 = true;
    },
    delete3(id) {
      //弹出框的删除
      console.log(id, "弹框删除");
      this.delete(id);
      this.getList();
      this.centerDialogVisible2 = false;
    },
    async searchFn(name) {
      if (name) {
        let res = await User["find"](name);
        console.log(res, "查找商品");
        this.list = res.data;
      } else {
        this.page();
        this.getList();
      }
    },
    open(obj) { //添加店员的确定
      //添加店员
      console.log(this.form, "666");
      let value = Object.values(this.form);
      let isTrue = value.every((item) => item !== "");
      if (isTrue) {
        this.addList(obj);
        this.$message({
          message:
            this.title === "添加店员" ? "成功添加一名店员" : "成功修改店员信息",
          type: "success",
        });
        this.form = {};
        this.dialogFormVisible = false;
      } else {
        this.$message({
          message: "表单内容全部为必填项，不能为空",
          type: "error",
        });
      }
    },
    change(){
     
      if(this.checked){
        this.setCheckedNodes()
        console.log(this.checked);
      }else{
        console.log(this.checked);
        this.$refs.menu.setCheckedKeys([]);
      }
    },
    setCheckedNodes(){
      this.$refs.menu.setCheckedNodes([{
          id: 1,
          label: '首页',
          path:"/",
          children: [{
            id: 11,
            label: '首页',
            path:"/Home"
          }]
        }, {
          id: 2,
          label: '商品服务',
          path:"/product",
          children: [{
            id: 21,
            label: '商品管理',
            path:"/product/pro",
          }]
        },
         {
          id: 3,
          label: '订单管理',
          path:"/order",
          children: [{
            id: 31,
            path:"/order/line",
            label: '线上订单'
          }],
          },
          {
          id: 4,
          label: '寄养管理',
          path:"/foster",
          children: [{
            id: 41,
            path:"/foster/foster",
            label: '寄养管理'
          }],
          },
          {
          id: 5,
          label: '会员中心',
          path:"/vip",
          children: [{
            id: 51,
            path:"/vip/vip",
            label: '会员管理'
          },
          {
            id: 52,
            path:"/vip/rules",
            label: '会员规则'
          }
        ],
         
          },
          {
          id: 6,
          label: '财务中心',
          path:"/center",
          children: [{
            id: 61,
            path:"/center/center",
            label: '财务中心'
          }],
          },
          {
          id: 7,
          label: '店员管理',
          path:"/clert",
          children: [{
            id: 71,
            path:"/clert/clert",
            label: '店员管理'
          }],
          },
      ])
    },
    async getList() {
      let res = await User["list"]();
      console.log(res, "user表");
      this.total = res.data;
      // this.list = res.data;
    },
    async getPath(){
      console.log(this.id,this.path,"路由需要的信息");
      let res = await User["updatePath"](this.id,this.path);
      console.log(res, "存入路由信息");
    },
  },
  mounted() {
    this.page();
    this.getList();
  },
  created(){ //分页取
    this.currentPage =Number(localStorage.getItem("lastPage"))  || 1;
    this.page()
    console.log(this.currentPage,"get");
  },
};
</script>

<style scoped lang="scss">
.box {
  padding-top: 20px;
  background: #f5f6fa;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  .Nbox {
    width: 100%;
    padding: 20px;
    background: #fff;
    .top {
      display: flex;
      width: 100%;
      background: #fff;
      margin-top: 16px;
      padding-bottom: 18px;
      border-bottom: 1px solid #e1e1e1;
      .el-input {
        width: 30vw;
        margin-right: 363px;
      }
      .addClerk {
        margin-right: 28px;
        .el-checkbox {
          float: left;
        }
      }
      .xBox {
        border: 1px solid #e1e1e1;
      }
    }
    .bottom {
      width: 100%;
      background: #fff;
    }
  }
  .el-checkbox:last-of-type {
    margin-right: 450px;
  }
  .block1 {
    display: flex;
    justify-content: center;
    padding: 10px;
  }
}
</style>

<style>
.menufooter{
  margin-top: 40px;
}
.el-checkbox:last-of-type {
  margin-right: 450px;
}

</style>